<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <link href="${ctx.resource}/css/credit-mall.css" rel="stylesheet">
    <title>积分商城</title>
  </head>
  <body>
    <div class="page-group">
      <div class="page page-current">
        <div class="bar-tab fs-tab-menu credit-mall-menu">
          <div class="tab-menu-box" style="width: 130%;">
            <a class="tab-item external" href="${ctx.host}/index">商城首页</a>
            <a class="tab-item external" href="${ctx.host}/products?type=online">线上营</a>
            <a class="tab-item external" href="${ctx.host}/products?type=offline">线下营</a>
            <a class="tab-item external" href="${ctx.host}/products?type=others">周边</a>
            <a class="tab-item external active" href="${ctx.host}/credit-mall">积分商城</a>
          </div>
        </div>
        <div class="content">
          <div class="swiper-container credit-swiper" data-space-between='10'>
            <div class="swiper-wrapper">
              <div class="swiper-slide"><a href="${ctx.host}/credit-mall/products/1"><img src="${ctx.resource}/image/credit-mall/product-1.jpg" alt=""></a></div>
              <div class="swiper-slide"><a href="${ctx.host}/credit-mall/products/6"><img src="${ctx.resource}/image/credit-mall/product-6.jpg" alt=""></a></div>
              <div class="swiper-slide"><a href="${ctx.host}/credit-mall/products/16"><img src="${ctx.resource}/image/credit-mall/product-16.jpg" alt=""></a></div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="row no-gutter record-wrap">
            <div class="col-50 text-center">
              <a href="${ctx.host}/profile/credit-records"><i class="iconfont icon-jifen"></i>积分：${empty credit ? 0 : credit.availableCredit}</a>
            </div>
            <div class="col-50 text-center">
              <a href="${ctx.host}/profile/credit-orders"><i class="iconfont icon-duihuanjilu"></i>兑换记录</a>
            </div>
          </div>
          <div class="content-block record-list">
            <div class="row no-gutter">
              <div class="col-50">
                <a href="${ctx.host}/credit-mall/products?tag=HOT" class="item">
                  <img src="${ctx.resource}/image/credit-mall/hot-cover.png">
                  <span class="record-tag"><img src="${ctx.resource}/image/credit-mall/hot.png"></span>
                </a>
              </div>
              <div class="col-50">
                <a href="${ctx.host}/credit-mall/products?tag=LIMITEDTIME" class="item">
                  <img src="${ctx.resource}/image/credit-mall/timelimit-cover.png">
                  <span class="record-tag"><img src="${ctx.resource}/image/credit-mall/timelimit.png"></span>
                </a>
              </div>
            </div>
          </div>
          <div class="record-product-list">
            <div class="content-block" style="margin-bottom: 0; margin-top: .75rem; padding-bottom: .75rem;">
              <div class="list-title clearfix"><span class="pull-left">积分好礼</span><a href="${ctx.host}/credit-mall/products?tag=CREDITPRESENT" class="pull-right" >更多</a></div>
              <div class="row">
                <c:forEach items="${creditProducts}" var="cp">
	                 <div class="col-50">
	                  <a href="${ctx.host}/credit-mall/products/${cp.id}">
	                    <div class="item">
  	                    <img src="${cloud.prod}/${cp.cover}-qrcode">
  	                    <div class="descript">
  	                      <p class="product-title">${cp.name}</p>
  	                      <div class="clearfix price-wrap">
  	                        <span class="original-price pull-left">${cp.price.intValue() }</span>
  	                        <p class="pull-right no-margin">积分<span class="credits">${cp.currentPrice.intValue()}</span></p>
  	                      </div>
  	                    </div>
  	                  </div>
	                  </a>
                  </div>
                </c:forEach>
              </div>
              <a href="${ctx.host}/credit-mall/products?tag=CREDITPRESENT" class="button button-light more-button">查看更多&nbsp;>></a>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/credit/mall/credit-mall-index.js" />
    <script type="text/javascript">
      require(['page/credit/mall/credit-mall-index'], function(page) {
        page.init()
      })
    </script>
    
  </body>
</html>